<template>
  <!-- 搜索框 -->
  <view class="search-box" :class="{focus:isFocus}">
    <input @focus="focusHandler" @blur="isFocus=false" type="text" placeholder="搜索" />
    <icon type="search" size="20"></icon>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 控制类名的切换的标记
        isFocus: false,
      }
    },
    methods: {
      focusHandler() {
        this.isFocus = true
        uni.navigateTo({
          url:"/pages/search/search"
        })
      }
    }
  }
</script>

<style lang="less">
  // 搜索区域
  .search-box {
    background-color: #fe2c4b;
    padding: 20rpx;
    position: relative;

    input {
      background-color: white;
      padding-left: 50%;
      border-radius: 10rpx;
      transition: .3s;
    }

    icon {
      position: absolute;
      top: 25rpx;
      left: 42%;
      transition: .3s;
    }

    &.focus {
      input {
        padding-left: 60rpx;
      }

      icon {
        left: 4%;
      }
    }
  }
</style>
